<template>
  <div class="components-container">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-row>
      <el-col :span="20">
      <!-- <template>
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template> -->开票管理
        <el-form-item label="用户名称">
          <el-input v-model="formInline.user" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="medium" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="4" style="text-align:right;"><el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogVisible = true">新增</el-button></el-col>
    </el-row>
  </el-form>
    <!-- <div class="my-header">
      <el-row>
        <el-col :span="24" style="text-align:right;">
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogVisible = true">新增</el-button>
        </el-col>
      </el-row>
    </div> -->
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            align="center"
            label="岗位名称">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="岗位描述">
          </el-table-column>
          <el-table-column
            prop="date"
            label="修改日期"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            align="center"
            width="180">
          </el-table-column>
        </el-table>
      </template>
      <template>
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="50">
          </el-pagination>
        </div>
      </template>
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span style="font-size:16px;margin-bottom:10px;display:inline-block;">岗位信息</span>
        <el-form label-width="100px" style="margin-left:6px;">
          <el-form-item label="岗位名称：">
            <el-input v-model="formInline.user" placeholder="请输入岗位名称"></el-input>
          </el-form-item>
          <el-form-item label="岗位说明：">
            <el-input v-model="formInline.user" placeholder="请输入岗位说明(选填)"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          currentPage1: 5,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4,
          dialogVisible: false,
          formInline: {
            user: '',
            region: ''
          },
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`)
        },
        onSubmit() {
          console.log('submit!')
        },
        handleClose(done) {
          this.dialogVisible = false
        }
      }
    }
  </script>
<style  scoped>
  .components-container {
    position: relative;
    height: 89vh;
  }

  .left-container {
    background-color: #F38181;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 100%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
